<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.box{
				margin: 50px auto;
				width: 50px;
				height: 50px;
				background: red;
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
		<script src="../../jquery-1.12.4.min.js"></script>
		<script >
			/*
			 * 是给document添加键盘按下时间
			 * 获取按下的是哪个键
			 * 获取元素在页面的位置（left，top）
			 * 根据按下的是哪个键来判断操作
			 * 若按下的左边箭头：设置元素的偏移量：offse({top:top,left:left-1})
			 */
			//获取元素
			var ele =$('.box');
			//给元素添加按下事件
			$(document).keydown(
				function(){
					var opt=event.which;
					var left=ele.offset().left;
					var top=ele.offset().top;
					switch(opt){
						//左边
						case 37:
						 ele.offset({top:top,left:left-1});
						 break;
						 case 38:
						 ele.offset({top:top-1,left:left});
						 break;
						 case 39:
						 ele.offset({top:top,left:left+1});
						 break;
						 case 40:
						 ele.offset({top:top+1,left:left});
						 break;
						 
						 
					}
				}
			);
		</script>
	</body>
</html>
